<template>
  <div class="common-container">
    <div class="task-manage-container">
      <el-card style="margin-bottom: 10px; padding-bottom: 0">
        <div class="search-line">
          <div>
            <el-button size="small" type="primary" @click="AddEditP({})">添加</el-button>
          </div>
          <div>
            <el-input size="small" placeholder="请输入名称" v-model="search.name" clearable></el-input>
          </div>
          <div>
            <el-button size="small" type="primary" :disabled="isSubS" @click="GetList" icon="el-icon-search">查询</el-button>
          </div>
        </div>
      </el-card>
      <!-- 列表区域 -->
      <el-table size="small" :data="tableData" stripe :header-cell-style="{background:'#eef1f6',color: '#606266'}" ref="refTable" class="my-table" style="width: 100%">
        <el-table-column prop="code" label="ID"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="adx_items" label="ADX集合">
          <template slot-scope="scope">
            {{ scope.row.adx_items && scope.row.adx_items.length ? scope.row.adx_items.length  : 0}}
          </template>
        </el-table-column>
        <el-table-column prop="ssp_items" label="SSP集合">
          <template slot-scope="scope">
            {{ scope.row.ssp_items && scope.row.ssp_items.length ? scope.row.ssp_items.length  : 0}}
          </template>
        </el-table-column>
        <el-table-column prop="dsp_items" label="预算集合">
          <template slot-scope="scope">
            {{ scope.row.dsp_items && scope.row.dsp_items.length ? scope.row.dsp_items.length  : 0}}
          </template>
        </el-table-column>
<!--        <el-table-column prop="dealid" label="DealId"></el-table-column>-->
        <el-table-column label="状态" width="100px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.flag"
                       active-color="#ff4949"
                       inactive-color="#13ce66"
                       @change="SetFlag(scope.row)"
                       active-value="2"
                       inactive-value="1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间" width="180">
          <template slot-scope="scope">
            {{scope.row.update_time | formatDate}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="AddEditP(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="DelData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;">
        <el-pagination background @current-change="GetList" @prev-click="GetList" @next-click="GetList" layout="prev, pager, next" :page-size="page.pageSize" :total="page.total"></el-pagination>
      </div>
    </div>
    <!-- 组建区域 -->
    <editpage ref="addeditp" />
  </div>
</template>
<script>
import { adxplan_list, adxplan_stats, adxplan_upflag} from '@/api/adxplan'
import editpage from './edit'
export default {
  name: 'adxplan-list',
  data(){
    return {
      isSubS:false,
      search:{
        name:'',
        code:'',
      },
      page:{
        pageSize:20,
        total:0
      },
      tableData:[],
    }
  },
  computed: {
  },
  components: {
    editpage
  },
  mounted(){},
  created() {
    this.GetList()
  },
  methods: {
    //添加编辑
    AddEditP(val){
      this.$refs.addeditp.showInfo(val)
    },
    //状态变更
    SetFlag(val){
      adxplan_upflag({id:val.id,flag:val.flag}).then(res => {
        var data = res
        if (data.status == 0 ){
          this.$message({
            showClose: true,
            center:true,
            message: '操作成功',
            type: 'success'
          })
        }else {
          this.$message({
            showClose: true,
            center:true,
            message: '操作失败:'+data.msg,
            type: 'error'
          })
        }
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    //删除确认
    DelData(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adxplan_stats({id:id,status:2}).then(res => {
          var data = res
          if (data.status == 0 ){
            this.$message({
              showClose: true,
              center:true,
              message: '操作成功',
              type: 'success'
            })
            this.GetList()
          }else {
            this.$message({
              showClose: true,
              center:true,
              message: '操作失败:'+data.msg,
              type: 'error'
            })
          }
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取列表
    GetList(val){
      this.isSubS = true
      var param = {
        name:this.search.name,
        pageNum:1,
        pageSize:this.page.pageSize
      }
      if (val > 0){
        param.pageNum = val
      }
      adxplan_list(param).then(res => {
        var data = res.data
        this.tableData = data.data
        this.page.total = data.total
        this.isSubS = false
      }).catch(err => {
        console.log(err)
        this.isSubS = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.task-manage-container {
  .el-table{
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    ::v-deep .el-table__header tr th{
      background: #f5f5f5;
    }
  }
}
.search-line{
  margin: 0px;
  display: flex;
  align-items: center;
}
.search-line > div {
  margin-right: 10px;
}
</style>